<template>
  <div class="info-index" v-loading.body="loading">
    <div class="top">
      <div class="top-img"><img :src="info.avatar"/></div>
      <div class="top-btn"><a href="javascript:;" @click="handleUpload">上传头像</a></div>
    </div>
    <div class="bottom clearfix">
      <div class="left">
        <div>用户昵称：<input v-model="info.username"/></div>
        <div>注册手机：{{prePhone(info.phone_no)}}</div>
        <div>注册身份：{{info.user_type === 0 ? '教师' : info.user_type === 1 ? '学生' : info.user_type === 2 ? '家长' : '未知'}}</div>
        <div v-if="edit">
          所属地区：
          <el-select
            v-model="value1"
            placeholder="省"
            @change="handleChange1"
            style="width:70px;"
            size="mini"
          >
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select
            v-model="value2"
            placeholder="市"
            @change="handleChange2"
            style="width:70px;"
            size="mini"
          >
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select
            v-model="value3"
            placeholder="区"
            @change="handleChange3"
            style="width:70px;"
            size="mini"
          >
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="right">
        <div>真实姓名：<input v-model="info.real_name"/></div>
        <div>常用邮箱：<input v-model="info.email"/></div>
        <div>联系QQ：<input v-model="info.qq_no"/></div>
        <div class="intro">
          <div class="left-title">个人简介：</div>
          <div class="right-content">
            <textarea v-model="info.signature"></textarea>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-group">
      <button class="gray-btn" @click="goBack">取消</button>
      <button class="common-btn" @click="handlePreserve">保存</button>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import user from '@/assets/mock_images/user.jpg'
import { getAddress } from 'api/common'
import { editUser } from 'api/user'
import pick from 'utils/file/picker'

export default {

  name: 'InfoEdit',

  components: {
    NavBar
  },
  data() {
    return {
      user,
      info: {},
      name: this.$route.name,
      options1: [],
      options2: [],
      options3: [],
      value1: '',
      value2: '',
      value3: '',
      edit: false,
      loading: false
    };
  },
  created() {
    this.fetchAddress(1)
    this.fetchData()
  },

  methods: {
    goBack() {
      this.$router.go(-1)
    },
    fetchData() {
      this.loading = true
      this.$store.dispatch('GetInfo')
      .then(res => {
        this.info = res.info
        const dis = res.info.district
        this.city = dis[dis.length - 1].id
        this.value1 = dis[0].name || ''
        this.value2 = dis[1].name || ''
        this.value3 = dis[2].name || ''
        this.edit = true
        this.loading = false
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    fetchAddress(num) {
      getAddress({
        city: this.city
      })
      .then(res => {
        this[`options${num}`] = res.city
      })
      .catch(err => console.log(err))
    },
    // 选择省，获取市
    handleChange1(val) {
      this.city = val
      this.fetchAddress(2)
    },
    // 选择市，获取区
    handleChange2(val) {
      this.city = val
      this.fetchAddress(3)
    },
    // 选择区
    handleChange3(val) {
      this.city = val
    },
    handleUpload() {
      pick()
      .then(file => {
        this.file = file
        this.info.avatar = window.URL.createObjectURL(file)
      })
      .catch(err => console.log(err))
    },
    handlePreserve() {
      editUser({
        ...this.info,
        district: this.city,
        avatar: this.file ? this.file : this.info.avatar
      })
      .then(() => {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.$router.go(-1)
      })
      .catch(err => console.log(err))
    },
    prePhone(phone) {
      if (phone) {
        return phone.replace(phone.slice(3, 7), '****')
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.info-index{
  padding: 30px 120px;
  .top{
    text-align: center;
    .top-img{
      display: inline-block;
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 40px;
      >img{
        width: 80px;
        height: 80px;
      }
    }
    .top-btn{
      >a{
        font-size: 12px;
        color: #00A2EA;
        &:hover{
          text-decoration: underline;
        }
      }
    }
  }
  .bottom{
    width: 100%;
    >div>div{
      line-height: 40px;
    }
    .left{
      width: 50%;
      float: left;
      border-right: 1px solid #e5e6e7;
    }
    .right{
      width: 50%;
      float: left;
      padding-left: 60px;
      input{
        width: 180px;
      }
      .intro{
        .left-title{
          vertical-align: top;
          float: left;
        }
        .right-content{

          margin-left: 70px;
          vertical-align: top;
          width: 220px;
          textarea{
            width: 100%;
            line-height: 20px;
          }
        }
      }
    }
  }
  .btn-group{
    margin: 80px auto;
    text-align: center;
    >button{
      width: 160px;
      height: 40px;
    }
  }
}
</style>